<template>
  <view class="container">
    <view class="icon-success">
      <text class="iconfont">&#xe603;</text> <!-- 这里使用了一个图标库中的成功图标 -->
    </view>
    <view class="title">支付成功</view>
    <view class="content">
      您的订单已成功支付！感谢您的购买。
    </view>
    <button class="continue-btn" @tap="goHome">继续购物</button>
  </view>
</template>

<script>
export default {
  methods: {
    goHome() {
      uni.switchTab({
        url: '/pages/index/index', // 假设首页的路径是/pages/index/index
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.icon-success {
  font-size: 100rpx;
  color: #4cd964;
}

.title {
  font-size: 36rpx;
  margin-top: 30rpx;
}

.content {
  font-size: 28rpx;
  margin-top: 20rpx;
  text-align: center;
}

.continue-btn {
  width: 70%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #4cd964;
  color: #ffffff;
  border-radius: 10rpx;
  margin-top: 50rpx;
}
</style>